<script setup>
import { RouterLink, RouterView, useRouter } from 'vue-router'
import { ref, reactive, onMounted, watch, inject } from 'vue'
import { globalStore } from '@/stores/global.js'
import { storeToRefs } from 'pinia';

import ScriptIcon from '@/components/icons/ScriptIcon.vue'
import PackingIcon from '@/components/icons/PackingIcon.vue'
import ProcessIcon from '@/components/icons/ProcessIcon.vue'

const storeGlobal = globalStore()
const router = useRouter()

const state = reactive({
  menuLatoutActive: 1,
  menu: [
    { id: 1, name: '软件升级包打包工具', path: '/upgradePackage' },
    { id: 2, name: '升级模块脚本管理工具', path: '/upgradeScript' },
    { id: 3, name: '拓扑流程图管理', path: '/topologyProcess' },
  ],
})

onMounted(() => {
  let menuLocal = localStorage.getItem('menuActive')
  if(!!menuLocal) {
    storeGlobal.changeMenu(menuLocal)
  }
  let data = state.menu.find((i) => i.id == storeGlobal.menuActive)
  if (data?.path != router.currentRoute.value.fullPath) {
    router.push(data?.path)
  }
})
</script>
<template>
  <el-container class="page-container">
    <el-header>
      <div class="container header-box">
        <router-link
          class="header-title"
          :class="storeGlobal.menuActive == item.id ? 'header-title-active' : ''"
          v-for="item in state.menu"
          :key="item.id"
          :to="item.path"
          @click="storeGlobal.changeMenu(item.id)"
        >
          <ScriptIcon
            v-show="storeGlobal.menuActive == item.id && storeGlobal.menuActive == 2"
            width="28"
            height="28"
          />
          <PackingIcon
            v-show="storeGlobal.menuActive == item.id && storeGlobal.menuActive == 1"
            width="28"
            height="28"
          />
          <ProcessIcon
            v-show="storeGlobal.menuActive == item.id && storeGlobal.menuActive == 3"
            width="28"
            height="28"
          />

          <span>{{ item.name }}</span>
        </router-link>
      </div>
    </el-header>
    <el-main class="container layout-box main-box"><RouterView /></el-main>
  </el-container>
</template>
<style lang="less">
.page-container {
  width: 100vw;
  height: 100vh;
}
.layout-box {
  margin: 0 auto;
  padding: 1.5rem 0;
}
.header-box {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin: 0 auto;
  height: 100%;
  gap: 16px;
  .header-title-active {
    font-size: 20px !important;
    font-weight: 600;
  }
  .header-title {
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      margin: 0 0 0 10px;
    }
  }
}
.el-header {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
}
</style>
